    <style include="cr-hidden-style">
      :host {
        --cr-slider-active-color: var(--google-blue-600);
        --cr-slider-container-color: rgba(var(--google-blue-600-rgb), .24);
        --cr-slider-container-disabled-color:
            rgba(var(--google-grey-600-rgb), .24);
        --cr-slider-disabled-color: var(--google-grey-600);
        --cr-slider-knob-color-rgb: var(--google-blue-600-rgb);
        --cr-slider-knob-disabled-color: white;
        --cr-slider-marker-active-color: rgba(255, 255, 255, .54);
        --cr-slider-marker-color: rgba(26, 115, 232, .54);
        --cr-slider-marker-disabled-color: rgba(128, 134, 139, .54);
        --cr-slider-position-transition: 80ms ease;
        --cr-slider-ripple-color: rgba(var(--cr-slider-knob-color-rgb), .25);

        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        cursor: default;
        height: 32px;
        outline: none;
        padding: 0 16px;
        user-select: none;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --cr-slider-active-color: var(--google-blue-300);
          --cr-slider-container-color:
              rgba(var(--google-blue-500-rgb), .48);
          --cr-slider-container-disabled-color:
              rgba(var(--google-grey-600-rgb), .48);
          /* --cr-slider-disabled-color is the same in dark mode (GG600). */
          --cr-slider-knob-color-rgb: var(--google-blue-300-rgb);
          --cr-slider-knob-disabled-color:
              var(--google-grey-900-white-4-percent);
          --cr-slider-marker-active-color: var(--google-blue-300);
          --cr-slider-marker-color: var(--google-blue-300);
          --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);
          --cr-slider-ripple-color: rgba(var(--cr-slider-knob-color-rgb), .4);
        }
      }

      /* Disable browser touch actions so that dragging via touch works
         correctly. */
      /* TODO(crbug/1068914): For reasons I don't understand we need to set
         touch-action: none on the container for sliders inside dialogs and on
         the host for sliders not in dialogs. If we don't, then you can't drag
         the slider via touch (mouse works fine).*/
      :host,
      :host > #container {
        touch-action: none;
      }

      #container,
      #bar {
        /* Using border instead of background-color to address pixel rounding
           at low zoom levels (e.g. 33%). The browser will round border widths
           to a minimum of 1px.*/
        border-top-style: solid;
        border-top-width: 2px;
      }

      #container {
        border-top-color: var(--cr-slider-container-color);
        position: relative;
        top: 16px;
      }

      #container > div {
        position: absolute;
      }

      #markers,
      #bar {
        top: -2px;
      }

      #markers {
        display: flex;
        flex-direction: row;
        left: 0;
        pointer-events: none;
        right: 0;
      }

      .active-marker,
      .inactive-marker {
        flex: 1;
      }

      #markers::before,
      #markers::after,
      .active-marker::after,
      .inactive-marker::after {
        border-radius: 50%;
        content: '';
        display: block;
        height: 2px;
        margin-inline-start: -1px;
        width: 2px;
      }

      #markers::before,
      .active-marker::after {
        background-color: var(--cr-slider-marker-active-color);
      }

      #markers::after,
      .inactive-marker::after {
        background-color: var(--cr-slider-marker-color);
      }

      #bar {
        border-top-color: var(--cr-slider-active-color);
      }

      :host([transiting_]) #bar {
        transition: width var(--cr-slider-position-transition);
      }

      #knobAndLabel {
        top: -1px;
      }

      :host([transiting_]) #knobAndLabel {
        transition: margin-inline-start var(--cr-slider-position-transition);
      }

      #knob {
        background-color: rgb(var(--cr-slider-knob-color-rgb));
        border-radius: 50%;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
        height: 10px;
        outline: none;
        transform: translate(-50%, -50%);
        width: 10px;
      }

      :host([is-rtl_]) #knob {
        transform: translate(50%, -50%);
      }

      #label {
        background: rgb(var(--cr-slider-knob-color-rgb));
        border-radius: .75em;
        bottom: 22px;
        color: white;  /* Same for dark and light mode. */
        font-size: 12px;
        line-height: 1.5em;
        opacity: 0;
        /* TODO(crbug.com/980856): Remove workaround after rendering bug is
         * fixed. */
        outline: 1px transparent solid;
        padding: 0 .67em;
        position: absolute;
        transform: translateX(-50%);
        transition: opacity 80ms ease-in-out;
        white-space: nowrap;
      }

      :host([is-rtl_]) #label {
        transform: translateX(50%);
      }

      :host(:hover) #label,
      :host([show-label_]) #label {
        opacity: 1;
      }

      paper-ripple {
        --paper-ripple-opacity: 1;  /* Opacity in each color's alpha. */
        color: var(--cr-slider-ripple-color);
        height: 32px;
        left: -11px;
        pointer-events: none;
        top: -11px;
        transition: color linear 80ms;
        width: 32px;
      }

      :host([is-rtl_]) paper-ripple {
        left: auto;
        right: -11px;
      }

      :host([disabled_]) {
        pointer-events: none;
      }

      :host([disabled_]) #container {
        border-top-color: var(--cr-slider-container-disabled-color);
      }

      :host([disabled_]) #bar {
        border-top-color: var(--cr-slider-disabled-color);
      }

      :host([disabled_]) .inactive-marker::after,
      :host([disabled_]) #markers::after {
        background-color: var(--cr-slider-marker-disabled-color);
      }

      :host([disabled_]) #knob {
        background-color: var(--cr-slider-disabled-color);
        border: 2px solid var(--cr-slider-knob-disabled-color);
        box-shadow: unset;
      }
    </style>
    <div id="container" hidden>
      <div id="bar"></div>
      <div id="markers" hidden$="[[!markerCount]]">
        <template is="dom-repeat" items="[[getMarkers_(markerCount)]]">
          <div class$="[[getMarkerClass_(index, value, min, max,
                                         markerCount)]]"></div>
        </template>
      </div>
      <div id="knobAndLabel" on-transitionend="onTransitionEnd_">
        <div id="knob" part="knob"></div>
        <div id="label" part="label">[[label_]]</div>
      </div>
    </div>
